<!--自定义选项卡-->
<template>
  <div>
    <el-tabs v-bind="$attrs" v-on="$listeners" class="tabs" @tab-click="tabClick">
      <el-tab-pane
        v-for="item in customTabsConfig.options"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      />
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { ICustomTabsConfig } from './types'
@Component({})
export default class CustomTabs extends Vue {
  @Prop({ type: Object, default: () => ({} as ICustomTabsConfig) })
  customTabsConfig!: ICustomTabsConfig

  tabClick(item: any) {
    this.$emit('tabClick', item.name, item.label)
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  ::v-deep {
    .el-tabs__header {
      margin-bottom: 10px;
    }
    .el-tabs__nav-wrap {
      &::after {
        height: 0;
      }
    }
    .el-tabs__item {
      color: #fff;
      // color: $--ip-font-color-secondary;
      &.is-active {
        color: #03e9f4;
        font-weight: 600;
      }
    }
    .el-tabs__active-bar {
      height: 3px;
      background-color: #03e9f4;
    }
  }
}
</style>
